import React from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {Row, Col, Card} from 'antd';
import {Table, Button} from 'antd';
import {browserHistory} from 'react-router'
import {selectRow, load, loadAll,del} from '../../actions/example'
import './index.less'
const columns = [{
    title: 'ExampleName',
    dataIndex: 'exampleName',
}, {
    title: 'ExampleId',
    dataIndex: 'exampleId',
}, {
    title: 'ExampleEmail',
    dataIndex: 'exampleEmail',
}];

const residences = [{
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [{
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [{
            value: 'xihu',
            label: 'West Lake',
        }],
    }],
}, {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [{
        value: 'nanjing',
        label: 'Nanjing',
        children: [{
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
        }],
    }],
}];


class Example extends React.Component {
    constructor() {
        super()
    }

    onChange(selectedRowKeys, selectedRows) {
        console.log('selectedRowKeys changed: ', selectedRows);
        this.props.selectRow(selectedRowKeys, selectedRows);
    }

    onSelect(record, selected, selectedRows) {
        // browserHistory.push('/some/path')

    }

    onPageChange(pageNo) {
        this.props.loadAll(pageNo, this.props.pageSize);
    }

    add() {
        browserHistory.push("/example/new");
    }

    del() {
        this.props.del(this.props.selectedRowKeys);
        console.log(this.props.selectedRowKeys);
    }

    reload() {
        this.props.load();
    }

    componentDidMount() {

    }

    componentWillMount() {
        this.props.loadAll(1, this.props.pageSize);
    }

    render() {
        console.log("example render....");
        const {loading, selectedRowKeys, data, total, pageNo, pageSize} = this.props;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onChange.bind(this),
            onSelect: this.onSelect.bind(this)
        };
        const pagination = {
            pageSize: pageSize,
            current: pageNo,
            total: total,
            onChange: this.onPageChange.bind(this),
            showTotal: function (total, range) {
                const start = (pageNo - 1) * pageSize;
                return range[0] + "-" + range[1] + " of " + total + " items";
            }
        };
        const hasSelected = selectedRowKeys.length > 0;

        function onRowClick(record, index) {
            browserHistory.push("/example/" + record.exampleId);
        }

        return (
            <div>
                <div style={{marginBottom: 16}}>
                    <Button type="primary" onClick={this.start}
                            disabled={!hasSelected} loading={loading}
                    >Reload</Button>
                    <Button type="primary" onClick={this.add.bind(this)}>新增</Button>
                    <Button type="primary" onClick={this.del.bind(this)}>删除</Button>
                    <span style={{marginLeft: 8}}>{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}</span>
                </div>
                <Table rowKey="exampleId" size="middle" onRowClick={onRowClick} rowSelection={rowSelection} columns={columns}
                       dataSource={data} pagination={pagination}/>
            </div>
        )
    }
}
const defaultProps = {
    selectedRows: []
}
Example.defaultProps = defaultProps;
function mapStateToProps(state) {
    return {
        loading: state.example.loading,
        selectedRowKeys: state.example.selectedRowKeys,
        selectedRowIds : state.example.selectedRowIds,
        data: state.example.list,
        total: state.example.total,
        pageNo: state.example.pageNo,
        pageSize: state.example.pageSize
    };
}
function mapDispatchToProps(dispatch) {
    return {
        selectRow: bindActionCreators(selectRow, dispatch),
        load: bindActionCreators(load, dispatch),
        loadAll: bindActionCreators(loadAll, dispatch),
        del : bindActionCreators(del,dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Example)
